<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Jessica 裸流 demo</title>
    <script src="./vconsole.js"></script>
    <script src="./js/jessibuca-pro-demo.js"></script>
    <link rel="stylesheet" href="./demo.css">
    <style>
        .container-shell:before {
            content: "jessibuca pro 裸流 demo";
        }
    </style>
</head>
<body class="page">
<div class="root">
    <div class="container-shell">
        <div id="container"></div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="mseSupport264" style="color: green;display: none">支持MSE H264解码；</span>
                <span id="mseSupport" style="color: green;display: none">支持MSE H265解码；</span>
                <span id="mseNotSupport264" style="color: red;display: none">不支持MSE H264解码；</span>
                <span id="mseNotSupport"
                      style="color: red;display: none">不支持MSE H265解码,会自动切换成wasm解码；</span>
            </div>
        </div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="wcsSupport264" style="color: green;display: none">支持Webcodecs H264解码；</span>
                <span id="wcsSupport" style="color: green;display: none">支持Webcodecs H265解码（不一定准确）；</span>
                <span id="wcsNotSupport264"
                      style="color: red;display: none">不支持Webcodecs H264解码(https/localhost)；</span>
                <span id="wcsNotSupport" style="color: red;display: none">不支持Webcodecs H265解码(https/localhost),会自动切换成wasm解码</span>
            </div>
        </div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="simdSupport" style="color: green;display: none">支持WASM SIMD解码</span>
                <span id="simdNotSupport"
                      style="color: red;display: none">不支持WASM SIMD解码,会自动切换成wasm解码</span>
            </div>
        </div>
        <div class="input">
            <div><input
                type="checkbox"
                checked
                id="useMSE"
            /><span>MediaSource</span>
                <input
                    type="checkbox"
                    id="useWCS"
                /><span>Webcodec</span>
                <input
                    type="checkbox"
                    id="useSIMD"
                /><span>SIMD</span>
            </div>
            <div style="margin-left: 10px">
                | FPS:<input type="number" id="fps" value="25" min="1" max="60"/>
            </div>
        </div>
        <div class="input">
            <div>
                <span>缓存时长：</span>
                <input placeholder="单位：秒" type="text" id="videoBuffer" style="width: 50px" value="0.2">秒
                <span>缓存延迟(延迟超过会触发丢帧)：</span>
                <input placeholder="单位：秒" type="text" id="videoBufferDelay" style="width: 50px" value="1">秒
                <button onclick="replay()">重播</button>
            </div>
        </div>
        <div class="input">
            <div>
                <span>(H264/H265)解封装器：</span>
                <input
                    checked
                    type="checkbox"
                    id="h264DemuxType1"
                /><span>V1</span>
                <input
                    type="checkbox"
                    id="h264DemuxType2"
                /><span>V2</span>
                <span>(v1版本兼容性更强，v2版本性能更强)</span>
            </div>
        </div>
        <div class="input">

            <div>
                <span>H265解封装器：</span>
                <input
                    checked
                    type="checkbox"
                    id="h265DemuxType1"
                /><span>V1</span>
                <input
                    type="checkbox"
                    id="h265DemuxType2"
                /><span>V2</span>
                <span>(v1版本兼容性更强，v2版本性能更强)</span>
            </div>
        </div>
        <div class="input">
            <div>
                测试地址：<br>
                <span style="color: red">h265:</span> ws://47.106.101.70:6702?type=h265_2k_raw <br>
                <span style="color: red">h264:</span> ws://47.106.101.70:6702?type=h264_360_mdraw
            </div>
        </div>
        <div class="input">
            <div>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="isNakedFlow"
                /><span>强制识别成裸流 <span style="color: red">(播放路径不是以.h264/.h265结尾的，建议勾选上)</span> </span>
            </div>
        </div>
        <div class="input">
            <div>
                <input
                    checked
                    onclick="replay()"
                    type="checkbox"
                    id="debug"
                />开启debug模式，可在控制台查看日志
            </div>
        </div>
        <div class="input">
            <div>输入URL：</div>
            <input
                autocomplete="on"
                id="playUrl"
                value=""
            />
            <button id="play">播放</button>
            <button id="pause" style="display: none">停止</button>
        </div>
        <div class="input" style="line-height: 30px">
            <button id="destroy">销毁</button>
            <!--            <button id="downloadNakedFlow">下载H265</button>-->
        </div>
    </div>
</div>
<script src="./demo.js"></script>
<script>
    var $player = document.getElementById('play');
    var $pause = document.getElementById('pause');
    var $playHref = document.getElementById('playUrl');
    var $container = document.getElementById('container');
    var $destroy = document.getElementById('destroy');
    var $downloadNakedFlow = document.getElementById('downloadNakedFlow');
    var $useMSE = document.getElementById('useMSE');
    var $useSIMD = document.getElementById('useSIMD');
    var $useWCS = document.getElementById('useWCS');
    var $fps = document.getElementById('fps');
    var $h265DemuxType1 = document.getElementById('h265DemuxType1');
    var $h265DemuxType2 = document.getElementById('h265DemuxType2');
    var $h264DemuxType1 = document.getElementById('h264DemuxType1');
    var $h264DemuxType2 = document.getElementById('h264DemuxType2');
    var $videoBuffer = document.getElementById('videoBuffer');
    var $videoBufferDelay = document.getElementById('videoBufferDelay');
    var $isNakedFlow = document.getElementById('isNakedFlow');
    var showOperateBtns = true; // 是否显示按钮
    var forceNoOffscreen = true; //
    var jessibuca = null;
    var $debug = document.getElementById('debug');

    function create() {
        jessibuca = new JessibucaPro({
            container: $container,
            videoBuffer: Number($videoBuffer.value), // 缓存时长
            videoBufferDelay: Number($videoBufferDelay.value), // 1000s
            decoder: './js/decoder-pro.js',

            isResize: false,
            text: "",
            loadingText: "加载中",
            debug: $debug.checked === true,
            debugLevel: 'debug',
            useMSE: $useMSE.checked === true,
            useSIMD: $useSIMD.checked === true,
            useWCS: $useWCS.checked === true,
            isNakedFlow: $isNakedFlow.checked === true,
            nakedFlowFps: Number($fps.value),
            checkFirstIFrame: false,
            showBandwidth: showOperateBtns, // 显示网速
            showPerformance: showOperateBtns, // 显示性能
            operateBtns: {
                fullscreen: showOperateBtns,
                screenshot: showOperateBtns,
                play: showOperateBtns,
                audio: showOperateBtns,
                ptz: showOperateBtns,
                quality: showOperateBtns,
                performance: showOperateBtns,
                scale: showOperateBtns,
            },
            qualityConfig: ['普清', '高清', '超清', '4K', '8K'],
            forceNoOffscreen: forceNoOffscreen,
            isNotMute: false,
            heartTimeout: 10,
            nakedFlowH265DemuxUseNew: $h265DemuxType2.checked === true,
            nakedFlowDemuxUseNew:$h264DemuxType1.checked === true,
            // demuxUseWorker:false,
            // checkFirstIFrame:false,
        },);


        jessibuca.on('ptz', (arrow) => {
            // console.log('ptz', arrow);
        })

        jessibuca.on('streamQualityChange', (value) => {
            // console.log('streamQualityChange', value);
        })

        jessibuca.on('timeUpdate', (value) => {
            // console.log('timeUpdate', value);
        })

        jessibuca.on(JessibucaPro.EVENTS.playFailedAndPaused, (error) => {
            jessibuca.showErrorMessageTips('播放异常：' + error);
        })

        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        $destroy.style.display = 'none';
    }

    function replay() {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
                play();
            });
        } else {
            create();
            play();
        }

    }

    function play() {
        var href = $playHref.value;
        if (href) {
            jessibuca.play(href).then(() => {
                $player.style.display = 'none';
                $pause.style.display = 'inline-block';
                $destroy.style.display = 'inline-block';
                notifySuccess('播放成功');
            }).catch((error) => {
                jessibuca.showErrorMessageTips(error.toString());
            });
        } else {
            jessibuca.showErrorMessageTips('播放地址不能为空');
        }
    }

    create();

    $player.addEventListener('click', function () {
        play();
    }, false)


    $pause.addEventListener('click', function () {
        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        jessibuca.pause();
    })

    $destroy.addEventListener('click', function () {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
            });
        } else {
            create();
        }
    })

    // $downloadNakedFlow.addEventListener('click', function () {
    //     if (jessibuca) {
    //         jessibuca.downloadTempNakedFlowFile();
    //     }
    // })

    $useMSE.addEventListener('click', function () {
        const checked = $useMSE.checked;
        if (checked) {
            $useSIMD.checked = false
            $useWCS.checked = false
        }
        replay();
    })

    $useSIMD.addEventListener('click', function () {
        const checked = $useSIMD.checked;
        if (checked) {
            $useMSE.checked = false
            $useWCS.checked = false
        }
        replay();
    })

    $useWCS.addEventListener('click', function () {
        const checked = $useWCS.checked;
        if (checked) {
            $useMSE.checked = false
            $useSIMD.checked = false
        }
        replay();
    })

    $h265DemuxType1.addEventListener('click', function () {
        const checked = $h265DemuxType1.checked;
        if (checked) {
            $h265DemuxType2.checked = false;
        }
        replay();
    })
    $h265DemuxType2.addEventListener('click', function () {
        const checked = $h265DemuxType2.checked;
        if (checked) {
            $h265DemuxType1.checked = false;
        }
        replay();
    })

    $h264DemuxType1.addEventListener('click', function () {
        const checked = $h264DemuxType1.checked;
        if (checked) {
            $h264DemuxType2.checked = false;
        }
        replay();
    })

    $h264DemuxType2.addEventListener('click', function () {
        const checked = $h264DemuxType2.checked;
        if (checked) {
            $h264DemuxType1.checked = false;
        }
        replay();
    })


    $fps.addEventListener('change', function () {
        if (jessibuca) {
            jessibuca.setNakedFlowFps(Number($fps.value));
        }
    })


</script>

</body>
</html>
